<template>
  <div>
    <TopBar />
    <!-- 订单表单 -->
    <el-table
      ref="singleTable"
      :data="this.$store.state.mzt.tableData"
      highlight-current-row
      @current-change="handleCurrentChange"
      style="width: 100%"
    >
      <el-table-column type="index" label="序号" width="110"> </el-table-column>
      <!-- 订单编号 -->
      <el-table-column property="oid" label="订单编号" width="110">
      </el-table-column>
      <!-- 商品图片 -->
      <el-table-column property="proid" label="商品图片" width="110">
        <template #default="scope">
          <img :src="scope.row.imgurl" alt="" />
        </template>
      </el-table-column>
      <!-- 商品名称 -->
      <el-table-column property="proname" label="商品名称" width="100">
      </el-table-column>
      <!-- 原价（元） -->
      <el-table-column property="oriprice" label="原价（元）" width="70">
      </el-table-column>
      <!-- 折扣价（元） -->
      <el-table-column property="disprice" label="折扣价（元）" width="100">
      </el-table-column>
      <!-- 积分抵扣金额（元） -->
      <el-table-column
        property="creamount"
        label="积分抵扣金额（元）"
        width="110"
      >
      </el-table-column>
      <!-- 购买数量 -->
      <el-table-column property="bnum" label="购买数量" width="110">
      </el-table-column>
      <!-- 实际支付金额（元） -->
      <el-table-column
        property="apayprice"
        label="实际支付金额（元）"
        width="110"
      >
      </el-table-column>
      <!-- 创建时间 -->
      <el-table-column property="createtime" label="创建时间" width="140">
      </el-table-column>
      <!-- 状态 -->
      <el-table-column property="state" label="状态" width="110">
        {{ state ? "已发货" : "待发货" }}
      </el-table-column>
      <!-- 操作 -->
      <el-table-column property="name" label="操作">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small"
            >删除</el-button
          >
          <el-button type="text" size="small">发货</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      @current-change="get_list"
      :total="total"
      :current-page.sync="current"
      :page-size="size"
    >
    </el-pagination>
  </div>
</template>

<script>
import { getList, del } from "../../api/mzt/index";
import TopBar from "@/components/MA-Z-T/TopView.vue";
export default {
  data() {
    return {
      dialogFormVisible: false,
      tableData: [],
      value1: "",
      currentRow: null,
      current: 1,
      size: 4,
      total: 0,
    };
  },

  components: {
    TopBar,
  },
  methods: {
    handleCurrentChange(val) {
      this.currentRow = val;
    },
    // 返回上一页
    fun() {
      this.$router.go(-1);
    },

    // 获取数据列表
    get_list() {
      getList(this.current, this.size).then((ok) => {
        console.log(ok.data);
        this.$store.commit("SET_TABLEDATA", ok.data.records);

        this.tableData = ok.data.records;
        this.total = ok.data.total;
      });
    },
    // 删除
    handleClick(row) {
      console.log(row);
      del(row.oid).then((ok) => {
        console.log(ok);
        this.get_list();
      });
    },
  },

  // 获取全部数据
  mounted() {
    getList(1, this.size).then((ok) => {
      console.log(ok.data.records);
      this.$store.commit("SET_TABLEDATA", ok.data.records);
      console.log(this.$store.state.mzt.tableData);
      this.tableData = ok.data.records;
      this.total = ok.data.total;
    });
  },
};
</script>

<style scoped lang="scss">
.el-col-24 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 20px 0 20px 0;
  padding: 0 140px 0 8px;
  border-left: 5px rgb(80, 176, 227) solid;
  .el-button {
    height: 40px;
  }
}

.block {
  .demonstration {
    display: inline-block;
    margin-right: 12px;
  }
}

.pay {
  margin-left: 11px;
}
.last {
  display: flex;
  justify-content: center;
  padding-right: 10px;
}
img {
  width: 60px;
}

.el-pagination {
  margin-top: 20px;
}

.top {
  display: flex;
  flex-wrap: wrap;
  .el-form-item {
    width: 320px;
  }
}
.block {
  padding-left: 30px;
}
.el-button {
  margin-left: 10px;
}
</style>